<template>
	<view>
		<view class="productbox">
			<view class="title">卖产品</view>
			<div class="product-contentb">
				<u--image :mode="'aspectFill'" :src="productlist[0].img" width="360rpx" height="270rpx"></u--image>
				<view class="imgsbox">
					<view :class="{ imgsitem: index > 0 }" v-for="(d, index) in productlist" :key="d.id">
						<template v-if="index > 0">
							<u--image :mode="'aspectFill'" :src="d.img" width="80rpx" height="80rpx"></u--image>
							<text class="fs-24 mar-top12">{{ d.name }}</text>
						</template>
					</view>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
export default {
	name: 'uni-sellingProducts',
	data() {
		return {
			productlist: [
				{
					name: '',
					img:
						'',
					id: '1'
				},
				{
					name: '乡村振兴',
					id: '2',
					img:
						'',
					id: '2'
				},
				{
					name: '熊猫品质',
					img:
						'data:',
					id: '3'
				},
				{
					name: '强烈推荐',
					img:
						'',
					id: '4'
				},
				{
					name: '品质溯源',
					img:
						'',
					id: '5'
				}
			]
		};
	}
};
</script>

<style lang="scss">
.productbox {
	background: #fff;
	border-radius: 8rpx;
	margin: 23rpx 30rpx 0;
}
.title {
	font-size: 32rpx;
	color: #3e3e3e;
	padding: 24rpx 26rpx 16rpx;
}
.product-contentb {
	display: flex;
	padding: 0 18rpx 16rpx;
	.imgsbox {
		display: flex;
		flex-wrap: wrap;
		.imgsitem {
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
